<template>
	<view class="container">
		<view class="apply_box">
			<view class="apply_title">
				申请原因
				<view class="select"><text style="margin-right: 10rpx;"
						@click="show = true">{{current==0?'请选择退货原因':reasonList[current-1]}}</text> <u-icon
						name="arrow-right" color="#666"></u-icon></view>
			</view>
			<view class="input_box">
				<textarea name="" maxlength="-1" id="" cols="30" rows="10" v-model="reason"
					placeholder="请描述申请售后服务的具体原因"></textarea>
			</view>
		</view>
		<view class="apply_box">
			<view class="apply_title">
				上传凭证
			</view>
			<view class="img_box">
				<view class="images_box" v-for="(item,index) in images" v-if="images.length>0"
					@click="lookImages(index)" :key="index">
					<view class="del_btn" @click.stop="delImg(index)">
						<u-icon name="trash-fill"></u-icon>
					</view>
					<image class="images" :src="item" mode=""></image>
				</view>
				<view class="add_box">
					<u-icon name="plus" size="80" color="#666" @click="uploadImg"></u-icon>
				</view>
			</view>
		</view>
		<view class="apply_box">
			<view class="apply_title">
				订单号：{{order_id}}
			</view>
			<view class="apply_title" style="margin-top: 20rpx;border: none;padding-bottom: 0;">
				退货数量：{{number}}
			</view>
		</view>
		<view class="tips">提交服务售后，售后专员可能会与您电话沟通，请保持手机通畅</view>
		<view class="foot" @click="submitApply">
			提交申请
		</view>
		<u-popup v-model="show" border-radius="14" mode="bottom" :safe-area-inset-bottom="true">
			<view class="mask_content">
				<view class="option" v-for="(item,index) in reasonList" :key="index" @click="reasonClick(index)">
					<view class="select">
						<view class="no">
							<u-icon name="checkmark-circle-fill" color="#EA3D37" size="26"
								v-if="current == index+1"></u-icon>
						</view>
					</view>
					<view>{{item}}</view>
				</view>
				<view class="mask_btn" @click="show = false">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				reasonList: ['质量问题', '发错货', '商品破损/包装脏污', '其他'],
				current: 0,
				reason: '',
				order_num: '',
				number: 1,
				orderInfo: null,
				order_id: '',
				images: [
					// require('@/static/images/bg.png'),
					// require('@/static/images/bg.png'),
				],
				orderDetails: []
			}
		},
		onLoad(opdata) {
			if (opdata) {
				console.log(opdata.orderInfo);
				this.orderInfo = JSON.parse(opdata.orderInfo)
				console.log(this.orderInfo);
				this.order_id = this.orderInfo.order_id
			}
		},
		methods: {
			submitApply() {
				if (this.current == 0) return this.$u.toast('请选择退货原因')
				if (this.reason == '') return this.$u.toast('请描述申请售后服务的具体原因')
				this.$allApi.applySales({
					uni: this.order_id,
					text: this.reasonList[this.current - 1],
					refund_reason_wap_explain: this.reason,
					refund_reason_wap_img: this.images.join(',')
				}).then(res => {
					this.$u.toast('申请成功，等待客服确认')
					setTimeout(() => {
						this.$backTo()
					}, 1500)
				})
			},
			reasonClick(index) {
				this.current = index + 1
			},
			valChange() {},
			delImg(index) {
				this.images.splice(index, 1)
			},
			lookImages(index) {
				uni.previewImage({
					urls: this.images,
					current: index
				})
			},
			uploadImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						for (let item of res.tempFiles) {
							if (res.tempFiles[0].size > item.size) {
								this.$api.total('图片大小不能超过5MB，请检查')
								return
							}
							uni.uploadFile({
								url: this.$baseUrl + 'api/upload/image',
								filePath: item.path,
								name: 'file',
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync('userToken') || ''
								},
								success: (imgRes) => {
									this.images.push(JSON.parse(imgRes.data).data.url)
								}
							})
						}

					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.tips {
		font-size: 20rpx;
		text-align: center;
		margin-top: 20rpx;
		color: #999;
	}

	.mask_content {
		padding: 30rpx;
		width: 710rpx;

		.mask_btn {
			width: 314rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background: #EA3D37;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.option {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			border-bottom: 1px solid #ECECEC;

			.select {
				margin-right: 20rpx;

				.no {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					border: 1px solid #EA3D37;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.apply_box {
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		background: #FFFFFF;

		.img_box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding-top: 20rpx;

			.add_box {
				width: 210rpx;
				height: 210rpx;
				border-radius: 6rpx;
				background: #F9F9F9;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10rpx;
			}

			.images_box {
				width: 210rpx;
				height: 210rpx;
				margin-right: 10rpx;
				position: relative;

				.del_btn {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					color: red;
					font-size: 32rpx;
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.images {
					width: 210rpx;
					height: 210rpx;
					border-radius: 6rpx;
				}
			}
		}

		.input_box {
			padding-top: 20rpx;

			textarea {
				width: 100%;
				height: 200rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.apply_title {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			input {
				flex: 1;
				padding-left: 20rpx;
			}
		}

	}

	.foot {
		width: 710rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background: #EA3D37;
		left: 20rpx;
		position: fixed;
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.container {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 20rpx;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom)
		}
</style>